<template>
  <div class="home">
    <home-content></home-content>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import HomeContent from './components/HomeContent.vue'

function handleScroll() {
  // let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  // 获取距离顶部的距离
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  // 获取可视区的高度
  const windowHeight = document.body.clientHeight
  // 获取滚动条的总高度
  const scrollHeight = document.body.scrollHeight

  // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
  if (scrollTop + windowHeight >= scrollHeight) {
    // console.log('到了')
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll, true)
})
</script>

<style lang="scss" scoped>
.home {
  width: 100%;

  height: 100%;

  background-color: #f1f2f9;
}
</style>
